<template>
    <section class="chat-item" v-for="chat in props.messageData" :key="chat.id">
        <section class="chat-item-row" v-if="chat.messageData.senderId !== userId">
            <img class="user-avatar" @error="defaultAvatar" :src="chat.messageData.senderAvatar || chat.messageData.avatar" alt="">
            <section class="user-chat-content">
                <span class="user-name">{{ chat.messageData.senderNickname }}</span>
                <p class="message-content" v-if="chat.messageData.contentType === 1">
                    {{ chat.messageData.content }}</p>

                <p class="message-content" v-if="chat.messageData.contentType === 2">
                    <img class="message-image" :src="chat.messageData.content" @click="previewImage(chat.messageData.content)" alt="">
                </p>
            </section>
        </section>
        <section class="chat-item-row myself-chat"
            v-if="chat.messageData.senderId === props.userId">

            <section class="user-chat-content">
                <span class="user-name">{{ chat.messageData.senderNickname }}</span>
                <p class="message-content" v-if="chat.messageData.contentType === 1">
                    {{ chat.messageData.content }}</p>

                <p class="message-content" v-if="chat.messageData.contentType === 2">
                    <img class="message-image" :src="chat.messageData.content" @click="previewImage(chat.messageData.content)" alt="">
                </p>

                <!-- <p class="message-content" v-if="chat.messageType === 'file'">
                <section class="flex-row">
                    <span>{{ chat.fileName }}</span>&nbsp;
                    <svg v-if="chat.typeFormat === 'application/pdf'" t="1722304100094"
                        class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7996" width="128"
                        height="128">
                        <path
                            d="M275.338818 1.787086a166.454251 166.454251 0 0 0-166.454251 166.45425v689.304413a166.454251 166.454251 0 0 0 166.454251 166.454251h519.020693a166.454251 166.454251 0 0 0 166.454251-166.454251V344.141611a64.335079 64.335079 0 0 0-18.636749-44.677138L662.881077 20.168537a63.058589 63.058589 0 0 0-44.677138-18.381451z"
                            fill="#FC4A49" p-id="7997"></path>
                        <path
                            d="M942.177013 299.464473L662.881077 20.168537a61.271503 61.271503 0 0 0-32.422837-16.849664 6.12715 6.12715 0 0 0-7.148342 6.12715v135.052606A194.537023 194.537023 0 0 0 818.357517 339.035652h135.052605a6.382448 6.382448 0 0 0 6.382448-7.148342 63.569185 63.569185 0 0 0-17.615557-32.422837z"
                            fill="#F91716" p-id="7998"></path>
                        <path
                            d="M824.739965 307.889304h124.330092a55.144353 55.144353 0 0 0-6.893044-8.424831L662.881077 20.168537a55.144353 55.144353 0 0 0-8.424832-6.893045v124.330093a170.28372 170.28372 0 0 0 170.28372 170.283719z"
                            fill="#FFC3C3" p-id="7999"></path>
                        <path
                            d="M282.231862 459.536275h67.653952c53.867863 0 80.929444 19.657941 80.929444 58.718524a54.123161 54.123161 0 0 1-23.232112 46.97482 95.992022 95.992022 0 0 1-56.420842 15.062577h-26.806283v65.611569H282.231862z m66.122164 91.141361c28.082772 0 41.868861-10.722513 41.868861-32.422837a25.529793 25.529793 0 0 0-10.977811-22.721516 62.547993 62.547993 0 0 0-32.422837-6.382448h-23.232112v61.526801zM468.85465 459.536275h56.420842a110.288706 110.288706 0 0 1 74.546996 22.721516 88.333084 88.333084 0 0 1 27.316879 70.206931 90.12017 90.12017 0 0 1-27.061581 70.717527 103.906258 103.906258 0 0 1-72.504612 23.742707h-58.718524z m53.867863 157.263526a55.910247 55.910247 0 0 0 62.292695-64.335079 55.399651 55.399651 0 0 0-62.292695-63.058589h-12.764896v127.648965zM667.47644 459.536275h127.648965v31.146348h-86.2907v48.761905h73.015208v31.401645h-73.015208v76.589379h-41.358265z"
                            fill="#F5F6FA" p-id="8000"></path>
                    </svg>
                    <svg v-if="chat.typeFormat === 'audio/mpeg'" t="1722305800864"
                        class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="10134" width="128"
                        height="128">
                        <path
                            d="M137.902164 0.00045a48.572979 48.572979 0 0 0-35.588984 15.293993 53.964976 53.964976 0 0 0-15.272993 35.639985v917.411596a48.706979 48.706979 0 0 0 15.272993 35.639985 49.970978 49.970978 0 0 0 35.589984 15.292993h746.335672a48.639979 48.639979 0 0 0 35.589985-15.292993 50.369978 50.369978 0 0 0 15.272993-35.639985V288.717323L646.727941 0.00045H137.902164z"
                            fill="#FF5562" p-id="10135"></path>
                        <path
                            d="M935.101814 288.717323H697.655918c-27.821988-0.666-50.226978-23.07599-50.927977-50.933977V0.00045l288.373873 288.716873z"
                            fill="#FFBBC0" p-id="10136"></path>
                        <path
                            d="M678.133927 487.465236c0.42-2.200999 0.42-4.453998 0-6.649997V358.532292a18.099992 18.099992 0 0 0-5.908997-12.763994 15.922993 15.922993 0 0 0-13.613994-3.393998l-265.599884 74.740967a15.420993 15.420993 0 0 0-12.681994 15.293993v292.105872a90.39396 90.39396 0 0 0-34.794985-6.655997 106.192953 106.192953 0 0 0-27.954988 3.394998c-43.289981 11.903995-70.379969 45.87998-61.951972 77.331966 6.644997 24.601989 32.275986 39.894982 64.475971 39.894983a161.209929 161.209929 0 0 0 28.020988-3.389999c38.978983-11.037995 64.409972-39.095983 63.544972-67.09197a12.457995 12.457995 0 0 0 0.865-5.984998V571.776199l233.266897-65.361972v144.358937a90.65496 90.65496 0 0 0-34.794985-6.650997 106.096953 106.096953 0 0 0-28.021987 3.393998c-43.227981 11.899995-70.384969 45.87498-61.885973 77.260966 6.640997 24.672989 32.204986 39.899982 64.470972 39.899983a105.901953 105.901953 0 0 0 27.955987-3.393999c38.179983-10.239996 63.609972-38.230983 63.609972-66.49397a12.170995 12.170995 0 0 0 0.866-5.912998l0.133-201.409911z m-265.599883 50.933977v-56.852975l233.394897-65.094971v56.918975l-233.394897 65.023971z"
                            fill="#FFFFFF" p-id="10137"></path>
                    </svg>
                    <svg v-if="chat.typeFormat === 'video/mp4'" t="1722305864919"
                        class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="12222" width="128"
                        height="128">
                        <path
                            d="M962.51904 1024H61.44c-22.60992 0-40.96-19.70176-40.96-43.99104V320.02048h983.04v659.98848c0 24.28928-18.35008 43.99104-41.00096 43.99104z m-208.4864-379.94496a42.5984 42.5984 0 0 0-18.35008-19.61984l-251.45344-135.168c-20.19328-10.8544-44.81024-2.08896-54.96832 19.61984-2.8672 6.18496-4.3008 12.9024-4.3008 19.70176v270.17216c0 24.28928 18.35008 43.99104 41.00096 43.99104a39.40352 39.40352 0 0 0 18.35008-4.66944l251.37152-135.04512v0.08192c20.2752-10.8544 28.4672-37.31456 18.35008-59.06432zM937.28768 0h25.23136C985.16992 0 1003.52 19.70176 1003.52 43.99104v219.99616h-208.15872L937.28768 0zM447.32416 263.9872L589.16864 0h253.5424l-141.9264 263.9872h-253.46048z m-227.36896 0L320.9216 0h173.6704L352.58368 263.9872H219.9552z m-199.4752 0V43.99104C20.48 19.70176 38.83008 0 61.44 0h82.944l-19.00544 263.9872H20.48z"
                            fill="#FA6060" p-id="12223"></path>
                    </svg>
                    <svg v-if="chat.typeFormat === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'"
                        t="1722305953915" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="15823" width="128"
                        height="128">
                        <path
                            d="M583.68 0H136.533333C116.053333 0 102.4 13.653333 102.4 34.133333v955.733334c0 20.48 13.653333 34.133333 34.133333 34.133333h750.933334c20.48 0 34.133333-13.653333 34.133333-34.133333V184.32L733.866667 0h-150.186667z"
                            fill="#E64340" p-id="15824"></path>
                        <path d="M733.866667 184.32H921.6L733.866667 0z" fill="#B83533"
                            p-id="15825"></path>
                        <path
                            d="M228.693333 522.24h71.68c17.066667 0 27.306667 0 37.546667 3.413333 10.24 3.413333 20.48 10.24 30.72 17.066667 6.826667 10.24 13.653333 20.48 17.066667 30.72s6.826667 27.306667 6.826666 47.786667c0 17.066667-3.413333 30.72-6.826666 40.96-3.413333 13.653333-10.24 27.306667-20.48 34.133333-6.826667 6.826667-17.066667 10.24-27.306667 17.066667-10.24 3.413333-20.48 3.413333-34.133333 3.413333H228.693333v-194.56z m37.546667 34.133333v129.706667h30.72c10.24 0 20.48 0 23.893333-3.413333 6.826667 0 10.24-3.413333 17.066667-6.826667s6.826667-10.24 10.24-20.48c3.413333-10.24 3.413333-20.48 3.413333-37.546667s0-27.306667-3.413333-34.133333l-10.24-20.48c-3.413333-3.413333-10.24-6.826667-17.066667-10.24-6.826667 0-17.066667-3.413333-34.133333-3.413333h-20.48zM416.426667 621.226667c0-20.48 3.413333-37.546667 10.24-51.2 3.413333-10.24 10.24-20.48 17.066666-27.306667 6.826667-6.826667 17.066667-13.653333 23.893334-17.066667 13.653333-6.826667 27.306667-6.826667 40.96-6.826666 27.306667 0 51.2 10.24 68.266666 27.306666s27.306667 44.373333 27.306667 75.093334c0 30.72-10.24 58.026667-27.306667 75.093333-17.066667 17.066667-40.96 27.306667-68.266666 27.306667-30.72 0-51.2-10.24-68.266667-27.306667s-23.893333-44.373333-23.893333-75.093333z m40.96 0c0 20.48 3.413333 37.546667 13.653333 51.2 10.24 10.24 23.893333 17.066667 37.546667 17.066666 17.066667 0 27.306667-6.826667 37.546666-17.066666 10.24-10.24 13.653333-27.306667 13.653334-51.2s-3.413333-37.546667-13.653334-51.2-23.893333-17.066667-37.546666-17.066667c-17.066667 0-30.72 6.826667-40.96 17.066667-3.413333 10.24-10.24 27.306667-10.24 51.2zM764.586667 645.12l37.546666 13.653333c-6.826667 20.48-17.066667 37.546667-30.72 47.786667-13.653333 10.24-30.72 17.066667-51.2 17.066667-27.306667 0-47.786667-10.24-64.853333-27.306667s-23.893333-40.96-23.893333-71.68c0-34.133333 6.826667-58.026667 23.893333-75.093333 17.066667-17.066667 37.546667-27.306667 64.853333-27.306667 23.893333 0 44.373333 6.826667 58.026667 20.48 10.24 6.826667 17.066667 20.48 20.48 37.546667l-37.546667 10.24c-3.413333-10.24-6.826667-17.066667-13.653333-23.893334-6.826667-6.826667-17.066667-10.24-27.306667-10.24-13.653333 0-27.306667 6.826667-34.133333 17.066667s-13.653333 27.306667-13.653333 51.2 3.413333 40.96 13.653333 51.2 20.48 17.066667 34.133333 17.066667c10.24 0 20.48-3.413333 27.306667-10.24s13.653333-20.48 17.066667-37.546667z"
                            fill="#FFFFFF" p-id="15826"></path>
                    </svg>

                    <svg v-if="chat.typeFormat === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
                        t="1722306206017" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="16934" width="128"
                        height="128">
                        <path
                            d="M968.704 135.168h-430.08v752.64h430.08c15.36 0 26.624-12.288 26.624-26.624V162.816c0-15.36-11.264-27.648-26.624-27.648z"
                            fill="#4CAF50" p-id="16935"></path>
                        <path
                            d="M727.04 270.336h188.416v80.896H727.04z m0 268.288h188.416v80.896H727.04z m0 134.144h188.416v80.896H727.04z m0-268.288h188.416v80.896H727.04zM538.624 270.336h134.144v80.896H538.624z m0 268.288h134.144v80.896H538.624z m0 134.144h134.144v80.896H538.624z m0-268.288h134.144v80.896H538.624z"
                            fill="#FFFFFF" p-id="16936"></path>
                        <path d="M592.896 996.352L28.672 888.832V135.168L592.896 27.648z"
                            fill="#2E7D32" p-id="16937"></path>
                        <path
                            d="M379.904 696.32l-63.488-119.808c-2.048-4.096-5.12-12.288-7.168-24.576H307.2c-1.024 6.144-4.096 14.336-8.192 25.6L235.52 696.32h-99.328l117.76-184.32-107.52-184.32h101.376l53.248 110.592c4.096 9.216 8.192 19.456 11.264 30.72h1.024c2.048-7.168 6.144-17.408 11.264-31.744L381.952 327.68h92.16L364.544 509.952 478.208 696.32h-98.304z"
                            fill="#FFFFFF" p-id="16938"></path>
                    </svg>
                </section>
                <section class="font-12">{{ chat.fileSize }}</section>
                </p> -->


            </section>
            <img class="user-avatar" @error="defaultAvatar" :src="chat.messageData.senderAvatar || chat.messageData.avatar" alt="">
        </section>

        <section class="chat-time-row" v-if="chat.type === 0">
            {{ chat.time }}
        </section>
    </section>
    <el-dialog style="padding: 20px !important; background-color: rgb(39, 39, 39);" v-model="dialogVisible" title="备注信息"
        width="80%" :before-close="handleClose">
        <section style="width: 100%;">
            <h2>预览</h2>
            <img :src="imgUrl" class="preview-image" alt="">
        </section>
        <template #footer>
            <span class="dialog-footer"> 
                <el-button type="primary" @click="handleClose">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { defaultAvatar } from '@/utils'

// log(defaultAvatar())
const props = defineProps({
    messageData: {
        type: Array,
        default: () => ([])
    },
    userId: {
        type: Number,
        default: 0
    }
})

const dialogVisible = ref(false)
const imgUrl = ref('')

const handleClose = () => {
    dialogVisible.value = false
    imgUrl.value = ''
}

const previewImage = (url) => {
    imgUrl.value = url
    dialogVisible.value = true
}

</script>

<style lang="scss" scoped>
.preview-image{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}
.myself-chat {
    justify-content: end;

    .user-name {
        text-align: right;
    }

    .user-chat-content {
        flex-direction: column;
        display: flex;
        justify-content: end;
    }

    .user-avatar {
        margin: 0 0 0 10px;
    }

    .message-content {
        margin: 0 0px 0 50px !important;
        
    }
}
.message-image{
    max-height: 200px;
    max-width: 100px;
    cursor: pointer;
}
.chat-item {
    margin-left: 10px;
    padding: 12px 0;

    .chat-item-row {
        display: flex;
        align-items: self-start;

        .user-name {
            color: #424242;
            padding-bottom: 5px;
            display: block;
        }

        .message-content {
            color: #303030;
            font-size: 15px;
            background: #e9f4ff;
            padding: 10px;
            border-radius: 4px;
            margin: 0 60px 0 0;
            flex-wrap: wrap;
            word-break: break-all;
            font-weight: normal;
            
            
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            min-height: 40px;
            object-fit: cover;
            border-radius: 5px;
            display: block;
            margin-right: 10px;
        }
    }
}
</style>